<template>
  <view class="user">
    <!-- 这里是海报的内容，例如用户头像、昵称、分享码等 -->
     <image :src="imageUrl" mode="scaleToFill" style="width: 628rpx;height: 1116rpx;margin: 0 auto;display: block;border-radius: 5px;" />
     <view class="pianyi">
      <view class="poster-content">
        <view class="poster-header flex flex-align">
          <view class="poster-avatar" :style="'background: url('+confige.share_img+') no-repeat;background-size: 100% 100%;'"></view>
          <view class="poster-nickname">{{ confige.title }}</view>
        </view>
        <view class="poster-bottom flex flex-align flex-bt">
          <view class="left">
            <view class="poster-share-name flex flex-align">
              <image :src="userAvatar"  mode="scaleToFill" />
              <view class="name">{{userNickname}}</view>
              <view class="wenzi">邀请您加入</view>
            </view>
            <view class="poster-share-title">每日都开播，狂欢好礼送不停～</view>
            <view class="share flex flex-center flex-align">
              <view>扫描二维码即可加入</view>
              <view class="image"></view>
            </view>
          </view>
          <view class="erweima flex flex-align flex-center">
            <image
              :src="shareImg"
              mode="scaleToFill"
            />
          </view>
        </view>
      </view>
     </view>
    <view class="erweimaIn">
      <vue-qr 
        v-if="qrCodeUrl" 
        ref="qrCodeRef"
        id="payQR" 
        :text="qrCodeUrl" 
        :size="105" 
        :margin="10"
        colorDark="#000000" 
        colorLight="#ffffff"
        :logosrc="confige.share_img" 
        :callback="getImgInfo" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import vueQr from 'vue-qr/src/packages/vue-qr.vue' 
import { onLoad } from '@dcloudio/uni-app';
import { useAuthStore } from '@/stores/counter'
import { getImgUrl, getURL } from '@/utils/tools';
const store=useAuthStore();
// 假设这些数据是从某个地方获取的
const dataInfo =store.dataUser
const confige = store.confige.wechat
const userAvatar = ref(getImgUrl(dataInfo.head_image));

const userNickname = ref(dataInfo.name);
const shareCode = ref(dataInfo.invite_code);
const qrCodeUrl = ref ('');
const imageUrl = ref ('');
const qrCodeRef = ref(null);
const shareImg = ref('');
onLoad(async ()=>{
  // const base64Avatar = await convertImageToBase64(userAvatar.value)
  if(confige.share_img){
    generateQRCode()

  }
    
})
const generatePoster = async () => {
  const posterElement = document.querySelector('.poster-content');
  if (!posterElement) return;

  const canvas = await html2canvas(posterElement);
  imageUrl.value = canvas.toDataURL('image/png');
  
};
function getImgInfo(qrUrl: any) {
  // 可以根据需求进行一些处理
  shareImg.value = qrUrl;
  setTimeout(()=>{
    generatePoster()
  },100)
}
const generateQRCode = async () => {
    try {
      qrCodeUrl.value = getURL(location.href,0) + '#/?inviter_code='+shareCode.value
    } catch (error) {
        console.error('Error generating QR code:', error);
    }
};
const convertImageToBase64 = (imageUrl: string): Promise<string> => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'Anonymous';
    img.src = imageUrl;
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.drawImage(img, 0, 0);
        const base64 = canvas.toDataURL('image/png');
        resolve(base64);
      } else {
        reject(new Error('无法获取画布上下文'));
      }
    };
    img.onerror = () => {
      reject(new Error('图片加载失败'));
    };
  });
};

</script>

<style scoped lang="scss">
page{background: #777879;}
.user{padding-top: 60rpx;}
.pianyi{position: fixed;top: -2000rpx;}
.poster-content{background: url('@/static/user/user28.png') no-repeat;background-size: 100% 100%;width: 628rpx;height: 1116rpx;
  margin: 0 auto;position: relative;
  .poster-header{padding: 40rpx 0 0 30rpx;position: absolute;top:0rpx;left:0rpx;
    .poster-avatar{width: 70rpx;height: 70rpx;border-radius: 100%;margin-right: 10rpx;}
    .poster-nickname{font-size: 24rpx;color: #fff;}
 }
 .poster-bottom{width: 628rpx;position: absolute;bottom: 0;left: 0;height: 220rpx;
  .left{padding: 0 20rpx;
    .poster-share-name{margin-bottom: 10rpx;
      image{width: 56rpx;height: 56rpx;border-radius: 100%;}
      .name{font-size: 22rpx;color: #FE7431;margin-left: 10rpx;}
      .wenzi{font-size: 22rpx;color: #969799;margin-left: 10rpx;}  
   }
   .poster-share-title{font-size: 22rpx;color: #323233;margin-bottom: 20rpx;font-weight: bold;}
  .share{background: linear-gradient(to right,#FE9640,#FE4927);border-radius: 40rpx;padding: 0rpx 20rpx;height:50rpx;width: 260rpx;
    view{font-size: 22rpx;color: #fff;margin-right: 10rpx;}
    .image{width: 28rpx;height: 28rpx;background: url('@/static/user/user29.png') no-repeat;background-size: 100% 100%;}
  }
 
 }
}
}
.erweima{
    image{width: 200rpx;height: 200rpx;}
  }
.erweimaIn{position: fixed;top: -2000rpx;}
</style>
